<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>z.less api - by busy - www.aibusy.com</title>
	<meta name="author" content="www.aibusy.com">
	<meta name="copyright" content="www.aibusy.com">
	<link rel="stylesheet" href="style/reset.css" type="text/css">
	<link rel="stylesheet" href="style/api.css" type="text/css">
	<link rel="shortcut icon" href="http://www.aibusy.com/favicon.ico">
	<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1" />
	<script src="js/common.js"></script>
</head>

<body>
<!--[if lt IE 9]>
<h1 style="text-align:center; padding:10px 0; color:Red;">非常抱歉的通知您：本站不向低版本浏览器兼容，请使用高级浏览器浏览，如chrome、firefox、opera、safari、IE9+等,谢谢您的理解。</h1>
<style>
	.headerbar,.head,.cont{display:none;}
	h1{width:80%; margin:30px auto; border:solid 1px #ccc;}
</style>
<![endif]-->
	<div class="header_bar">
		<div class="header_cont">
			<div class="header_info">
				<h1 class="logo">Z.less <span> - By Busy</span></h1>
				<a href="javascript:;" class="btn_menu" id="btn_menu">
					<span></span>
					<span></span>
					<span></span>
				</a>
			</div>
			<ul class="header_nav" id="header_nav">
				<li><a href="index.html#cont" class="active">手册</a></li>
				<li><a href="v.html">更新日志</a></li>
				<li><a href="http://less.bootcss.com/functions/" target="_blank">函数手册</a></li>
				<li><a href="http://aibusy.com/#about" target="_blank">联系我</a></li>
				<li><a href="http://aibusy.com/blog/" target="_blank">博客</a></li>
			</ul>
		</div>
	</div>
	<div class="banner">
		<div class="banner_cont clearfix">
			<div class="banner_introduction">
				<h2 title="What's this"><span>z.less</span> ? What's this</h2>
				<p>z.less 是一个基于less的框架，其提供了很多简洁的CSS写法(详见手册)</p>
				<p>&nbsp;</p>
				<p class="q">Q：这玩意会有人更新吗？</p>
				<p>A：是的，我一直会更新的</p>
				<p class="q">Q：那我有好的想法怎么办？</p>
				<p>A：您可以联系我本人，和我说您的好的想法，z.less本身就是开源的，任何人都可以进行下载，您可以对界面及z.less库本身进行任何的修改，当然有建议或想法也可以联系我。</p>
				<p class="q">Q：我如何联系你？</p>
				<p>A：加QQ：1060755575 或 新浪微博 @依然我很忙 </p>
				<p class="qun">zless交流群：<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=15156524c1c8260b6e512cd2ee6f4b63f46e250b097e4abdb0197a1e6c8c0347">214534136</a></p>
			</div>
			<div class="banner_info">
				<p class="version"><a href="v.html">更新日期：2015-8-25</a></p>
				<a href="zless.zip" class="head_btn">下载</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1060755575&site=qq&menu=yes" class="head_btn opinion">提提意见</a>
			</div>
		</div>
	</div>
	<div class="cont" id="cont">
		<ul class="main">
			<li class="tit">
				<div>less语法</div>
				<div>描述(详解/例子)</div>
			</li>
		</ul>
		<div class="item">
			<h3>reset<span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.reset()</strong></div>
					<div>
						<i>重置</i>
						<br> 其生成的代码为
						<i>*</i>的形式，不太适合大公司所用。
					</div>
				</li>
				<li id="reset-sina">
					<div><strong>.reset-sina()</strong></div>
					<div>
						<i>重置</i>
						<br> 适合上线使用，其重置来自新浪首页。
						<br> 添加了对
						<i>input</i>和<i>textarea</i>的边框去掉了
						<br>
						<i>border:none;</i>和<i>background:none</i>添加了
					</div>
				</li>
				<li id="reset-eric">
					<div><strong>.reset-eric()</strong>
						<br><strong>.reset-yahoo()</strong>
						<br><strong>.reset-normalize()</strong></div>
					<div>
						<i>重置</i>
						<br>
						<strong>.reset-eric()</strong>为 国外名人 - Eric Meyer’s
						<br>
						<strong>.reset-yahoo() </strong>为雅虎重置
						<br>
						<strong>.reset-normalize()</strong> 为 normalize
						<br>
						<p>注：需要引入<i>reset.less</i>文件</p>
					</div>
				</li>
				<li id="remove_dotted">
					<div><strong>.remove_dotted()</strong></div>
					<div>
						去除<i>a</i>和<i>label</i>点击时候的虚线框，可根据需求而定
						<br>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>布局<span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.fl()</strong></div>
					<div>
						<i>左浮动</i>，其默认值为左浮动,可在括号内传入<i>left</i>或<i>right</i>改变浮动方向
					</div>
				</li>
				<li>
					<div><strong>.fr()</strong></div>
					<div>
						<i>右浮动</i>，其默认值为右浮动,可在括号内传入<i>left</i>或<i>right</i>改变浮动方向
					</div>
				</li>
				<li>
					<div><strong>.clearfix()</strong></div>
					<div>
						<i>清浮动</i>，已做了对<i>margin-top</i>影响其父级的不兼容处理
					</div>
				</li>
				<li>
					<div><strong>.bc()</strong></div>
					<div>
						<i>普通居中</i>，无默认值，其生成 <i>margin-left: auto;</i>和<i>margin-right: auto;</i>
					</div>
				</li>
				<li>
					<div><strong>.bc-d()</strong></div>
					<div>
						<i>普通居中带默认宽度</i>
						<br> 其默认值为
						<i>500px</i>，可直接传入数值即可
						<br>也可以传入<i>全局变量</i>或<i>局部变量</i>
					</div>
				</li>
				<li>
					<div><strong>.rel()</strong></div>
					<div>
						<i>相对定位</i>，可传入<i>relative</i>、<i>absolute</i>、<i>fixed</i>改变其值
					</div>
				</li>
				<li>
					<div><strong>.abs()</strong></div>
					<div>
						<i>绝对定位</i>，可传入<i>relative</i>、<i>absolute</i>、<i>fixed</i>改变其值
					</div>
				</li>
				<li>
					<div><strong>.fix()</strong></div>
					<div>
						<i>固定定位</i>，可传入<i>relative</i>、<i>absolute</i>、<i>fixed</i>改变其值
					</div>
				</li>
				<li>
					<div><strong>.pos()</strong></div>
					<div>
						<i>综合，必须传参</i>
						<br> 使用方法，在某个选择器内写变量名称并传入
						<i>r</i>、<i>a</i>、<i>f</i>即可
						<pre>
					div{
					　　width:300px;
					　　height:300px;
					　　.pos(r); /*.pos(r或a或f)*/
					}
				</pre>
					</div>
				</li>
				<li id="pos-box">
					<div><strong>.pos-box(@w,@h,@pos)</strong></div>
					<div>
						<i>定位元素</i>
						<br> 其默认值为
						<i>width:500px;height:400px;</i>,默认定位方式为<i>position: absolute;</i>，可直接传入值即可改变定位
						<br>默认位置为<i>left:0;</i>、<i>top:0;</i>
						<p>注：<i>fixed</i>未做IE6兼容处理</p>
					</div>
				</li>
				<li id="pos-box-cc">
					<div><strong>.pos-box-cc(@w,@h,@pos)</strong></div>
					<div>
						<i>定位居中元素</i>
						<br> 其默认值为
						<i>width:600px;height:360px;</i>,默认定位方式为<i>position: absolute;</i>，可直接传入值即可改变定位
						<br><i>已做水平和垂直居中处理</i>
						<br>
						<p>注：<i>fixed</i>未做IE6兼容处理</p>
					</div>
				</li>
				<li id="wh">
					<div><strong>.wh()</strong> / <strong>.w-be-h()</strong></div>
					<div>
						<i>宽高相等</i>,如果是<i>inline</i>元素，需要给<strong>.d-b()</strong> / <strong>.d-ib()</strong>
					</div>
				</li>
				<li id="z-index">
					<div>
						<strong>.z-index(@index:1)</strong>
					</div>
					<div><i>z-index</i>，默认值为<i>1</i></div>
				</li>
				<li id="h100">
					<div>
						<strong>.h100()</strong>
					</div>
					<div><i>高度100%</i>，无序传参，直接调用即可</div>
				</li>
				<li>
					<div id="l-h"><strong>.txt-ver(@h)</strong> / <strong>.l-h(@h)</strong></div>
					<div>
						<i>文字在某个容器垂直居中</i>
						<p>注，<i>必须</i>传入高度值，不传值会报错。</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>display<span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.d-b()</strong></div>
					<div>
						<i>display:block;</i>
					</div>
				</li>
				<li>
					<div><strong>.d-i()</strong></div>
					<div>
						<i>display:inline;</i>
					</div>
				</li>
				<li>
					<div><strong>.d-ib()</strong></div>
					<div>
						<i>display:inline-block;</i>
					</div>
				</li>
				<li>
					<div><strong>.d-ib7()</strong></div>
					<div>
						<i>display:inline-block;</i>添加了对<i>IE6、7</i>块元素不支持<i>inline-block</i>转换的兼容
					</div>
				</li>
				<li>
					<div><strong>.d-t()</strong></div>
					<div>
						<i>display:table;</i>
					</div>
				</li>
				<li>
					<div><strong>.d-n()</strong></div>
					<div>
						<i>display:none;</i>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>font<span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.font-fm()</strong></div>
					<div>
						<i>font-family: "Microsoft Yahei","微软雅黑"</i>
					</div>
				</li>
				<li>
					<div><strong>.font-fs()</strong></div>
					<div>
						<i>font-family: "SimSun","宋体";</i>
					</div>
				</li>
				<li>
					<div><strong>.font-fa()</strong></div>
					<div>
						<i>font-family: "Arial";</i>
					</div>
				</li>
				<li>
					<div><strong>.font-fv()</strong></div>
					<div>
						<i>font-family:Verdana;</i>
					</div>
				</li>
				<li>
					<div><strong>.font-w700()</strong> / <strong>.font-wb()</strong></div>
					<div>
						<i>文字加粗</i>
					</div>
				</li>
				<li>
					<div><strong>.font-w400()</strong> / <strong>.font-wn()</strong></div>
					<div>
						<i>文字不加粗/普通文字</i>
					</div>
				</li>
				<li>
					<div><strong>.font-s()</strong></div>
					<div>
						<i>font-size</i>字体大小，默认值为<i>12</i>,可<i>(传入任意数值且必须带的px，例如30px)</i>
					</div>
				</li>
				<li>
					<div><strong>.font-s0() ~ font-s100()</strong></div>
					<div>
						<i>font-size</i>字体大小，可以从<i>0~100</i>的任意数值</i>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>text<span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.text-n()</strong></div>
					<div>
						<i>text-decoration</i>文字下划线，默认值为<i>none</i>,可在括号内传入相应的值.
						<br>
						<a href="http://www.w3.org/wiki/CSS/Properties/text-decoration#Values" target="_blank">参考标准</a>
					</div>
				</li>
				<li>
					<div><strong>.tn()</strong></div>
					<div>
						<i>text-decoration: none;</i>
					</div>
				</li>
				<li>
					<div><strong>.tl()</strong> / <strong>.text-l()</strong></div>
					<div>
						<i>text-align: left;</i>
					</div>
				</li>
				<li>
					<div><strong>.tc()</strong> / <strong>.text-c()</strong></div>
					<div>
						<i>text-align: center;</i>
					</div>
				</li>
				<li>
					<div><strong>.tr()</strong> / <strong>.text-r()</strong></div>
					<div>
						<i>text-align: right;</i>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>透明度<span class="iTab"></span></h3>
			<ul class="main">
				<li id="opa">
					<div><strong>.opa()</strong></div>
					<div>
						<i>透明度</i>，其默认值为<i>80</i>，已添加对IE低版本的兼容
						<br>
						<p>注：传值的时候，需要传<i>0~100</i>之间的数</p>
					</div>
				</li>
				<li id="rgba">
					<div><strong>.rgba()</strong></div>
					<div>
						<i>css3背景透明</i>，可用于普通元素，内部已添加对低版本浏览器的处理，可全兼容。<i>(r,g,b,a)</i>括号内必须传参
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3 id="background">bgckground<span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.bg(@url,@x:0,@y:0)</strong></div>
					<div>
						<i>background</i>,填充背景，只需要传入<i>url</i>就好
						<br>
						<p>注：<i>url必须用引号括起来</i>，推荐使用双引号。</p>
						<br>默认的位置为 <i>background-position: 0 0;</i> 、<i>background-repeat:repeat</i>
					</div>
				</li>
				<li>
					<div><strong>.bg-m(@url,@x:0,@y:0,@repeat:no-repeat)</strong></div>
					<div>
						<i>background</i>,填充背景，可传入多参数。
						<br>默认的位置为 <i>background-position: 0 0;</i> 、 <i>background-repeat:no-repeat</i>

					</div>
				</li>
				<li>
					<div><strong>.bgi(@url)</strong></div>
					<div>
						<i>background-image</i>,填充背景，只需要传入<i>url</i>就好
						<br>
						<p>注：<i>url必须用引号括起来</i>，推荐使用双引号。</p>
					</div>
				</li>
				<li>
					<div><strong>.bgp(@x,@y)</strong></div>
					<div>
						<i>background-position:0 0</i>需要传入<i>x,y</i> 默认值为 <i>x:0,y:0</i>
						<br>
						<p>注：由于 <i>background-position</i> 的方向太多(9个点外加任意点),故不一 一列举方法，传参即可。</p>
					</div>
				</li>
				<li>
					<div><strong>.bgr-r()</strong></div>
					<div>
						<i>background-repeat: repeat;</i>
					</div>
				</li>
				<li>
					<div><strong>.bgr-x()</strong></div>
					<div>
						<i>background-repeat: repeat-x;</i>
					</div>
				</li>
				<li>
					<div><strong>.bgr-y()</strong></div>
					<div>
						<i>background-repeat: repeat-y;</i>
					</div>
				</li>
				<li>
					<div><strong>.bgr-no()</strong></div>
					<div>
						<i>background-repeat: no-repeat;</i>
					</div>
				</li>
				<li>
					<div><strong>.bga-fix()</strong></div>
					<div>
						<i>background-attachment: fixed;</i>背景固定
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>其他<span class="iTab"></span></h3>
			<ul class="main">
				<li id="ellipsis-basic">
					<div>
						<strong>.ellipsis-basic()</strong>
					</div>
					<div>
						<i>文字省略号</i>，需要配合宽度使用
					</div>
				</li>
				<li id="ellipsis">
					<div>
						<strong>.ellipsis()</strong>
					</div>
					<div>
						<i>文字省略号</i>可传入宽度
						<p>注，<i>( )</i>内部使用百分比，例如<strong>.ellipsis(8)</strong>出来的结果就是<i>width:92%;</i></p>
					</div>
				</li>
				<li>
					<div><strong>.triangle()</strong></div>
					<div>
						<i>css2的三角</i>，已做<i>IE6</i>的兼容，使用方法
						<pre>
					i{
					　@fx:top;
					　.triangle(@fx);
					}
				</pre> 此时三角为向下的三角，可直接传入
						<i>top</i>、<i>right</i>、<i>bottom</i>、<i>left</i>
					</div>
				</li>
				<li>
					<div><strong>.triangle-compatible()</strong></div>
					<div>
						为三角添加一些附加属性。便于批量三角添加。
						<pre>
					i{
					　@fx:top;
					　.triangle(@fx);
					}
				</pre> 此时三角为向下的三角，可直接传入
						<i>top</i>、<i>right</i>、<i>bottom</i>、<i>left</i>
					</div>
				</li>
				<li>
					<div>
						<strong>.triangle-t(@w:5px,@color:#ccc)</strong> - 上
						<br>
						<strong>.triangle-r(@w:5px,@color:#ccc)</strong> - 右
						<br>
						<strong>.triangle-b(@w:5px,@color:#ccc)</strong> - 下
						<br>
						<strong>.triangle-l(@w:5px,@color:#ccc)</strong> - 左
						<br>
					</div>
					<div>
						<br>
						<i>css2的三角</i>，均已做兼容处理，默认大小为<i>5</i>，默认 颜色为<i>#ccc</i>
						<br>
						<p>注：<i>-t</i>代码三角朝向哪个方向(其他依次类推)</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>特殊需求<span class="iTab"></span></h3>
			<ul class="main">

				<li id="min-width">
					<div><strong>.min-width(@width)</strong></div>
					<div>
						<i>最小宽度</i>已做低版本兼容
					</div>
				</li>
				<li id="max-width">
					<div><strong>.max-width(@width,@id)</strong></div>
					<div>
						<i>最大宽度</i>
						<br> IE6兼容方法，给需要添加最大宽度的容器里面的内容在包一层(建议使用div)，然后给一个ID,
						<br><strong>.max-height(@height,@id)</strong>中的<i>@id</i>必需传(传的是里面包那层的ID)。
						<br> 内部已添加<i>overflow:hidden;</i>
						<br>
						<a href="http://www.aibusy.com/demo/max-width_height.html" target="_blank">查看Demo</a>、
					</div>
				</li>
				<li id="min-height">
					<div><strong>.min-height(@height)</strong></div>
					<div>
						<i>最小高度</i>已做低版本兼容
					</div>
				</li>
				<li id="max-height">
					<div><strong>.max-height(@height,@id)</strong></div>
					<div>
						<i>最大高度</i>
						<br> IE6兼容方法，给需要添加最大高度的容器里面的内容在包一层(建议使用div)，然后给一个ID,
						<br><strong>.max-height(@height,@id)</strong>中的<i>@id</i>必需传(传的是里面包那层的ID)。
						<br> 内部已添加<i>overflow:hidden;</i>
						<br>
						<a href="http://www.aibusy.com/demo/max-width_height.html" target="_blank">查看Demo</a>
					</div>
				</li>
			</ul>
		</div>
		<div class="item">
			<h3>css3 - <p class="inline">注：需要引入css3.less文件</p><span class="iTab"></span></h3>
			<ul class="main">
				<li>
					<div><strong>.border-radius()</strong></div>
					<div>
						<i>圆角</i>，默认圆角为<i>5px</i>，可在<i>( )</i>内传参
						<br> 也可传入响应的角度，圆角方向为：
						<i>上左</i>、<i>上右</i>、<i>下左</i>、<i>下右</i>
					</div>
				</li>
				<li>
					<div>
						<strong>.border-top-left-radius()</strong>
						<br>
						<strong>.border-top-right-radius()</strong>
						<br>
						<strong>.border-bottom-right-radius()</strong>
						<br>
						<strong>.border-bottom-left-radius()</strong>
						<br>
					</div>
					<div>
						<br>
						<i>单角</i>，默认值为<i>5px</i>，可在<i>( )</i>内传参
					</div>
				</li>
				<li>
					<div>
						<strong>.box-shadow()</strong>
					</div>
					<div>
						<i>盒子阴影</i>，默认值为<i>0px 0px 5px #ccc</i>，可在<i>( )</i>内传入<i>x y 阴影大小 颜色</i>
					</div>
				</li>
				<li>
					<div>
						<strong>.text-shadow()</strong></strong>
					</div>
					<div>
						<i>文字阴影</i>，默认值为<i>0px 0px 2px #333</i>，也可以在后面无限的传参
						<br> 例如：
						<i>text-shadow(0 0 2px #ccc,1px 1px 3px red,........)</i>
					</div>
				</li>
				<li>
					<div>
						<strong>.linear-gradient()</strong>
					</div>
					<div>
						<i>渐变</i>，需传参，可传入多参数
					</div>
				</li>
				<li>
					<div>
						<strong>.cs3move()</strong>
					</div>
					<div>
						<i>css3动画</i>已添加前缀，可传参，默认参数<i>all ease .3s</i>
					</div>
				</li>
				<li>
					<div>
						<strong>.transition()</strong>
					</div>
					<div>
						<i>css3动画</i>已添加前缀，必须传参
					</div>
				</li>
				<li>
					<div><strong>.opacity()</strong></div>
					<div>
						<i>透明度</i>，其默认值为<i>80</i>，已添加对IE低版本的兼容
					</div>
				</li>
				<li>
					<div><strong>.background-rgba()</strong></div>
					<div>
						<i>css3背景透明</i>，可用于普通元素，内部已添加对低版本浏览器的处理，可全兼容。<i>(r,g,b,a)</i>括号内必须传参
					</div>
				</li>
				<li id="2014-3-9">
					<div><strong>.background-clip()</strong></div>
					<div>
						规定背景的绘制区域，默认值为<i>border-box</i>
						<br> 可用参数：
						<br>
						<i>border-box:</i> 从border区域向外裁剪背景。
						<br>
						<i>padding-box:</i> 从padding区域向外裁剪背景。
						<br>
						<i>content-box:</i> 从content区域向外裁剪背景。
						<br>
						<i>no-clip:</i> 从border区域向外裁剪背景。
						<br>
					</div>
				</li>
				<li>
					<div><strong>.background-origin()</strong></div>
					<div>
						规定背景的绘制区域，默认值为<i>padding-box</i>
						<br> 可用参数：
						<br>
						<i>border</i> 从border区域开始显示背景。
						<br>
						<i>padding</i> 从padding区域开始显示背景。
						<br>
						<i>content</i> 从content区域开始显示背景。
						<br>
					</div>
				</li>
				<li>
					<div><strong>.background-size()</strong></div>
					<div>
						规定背景的绘制区域，默认值为<i>auto</i>
						<br> 可用参数：
						<br>
						<i>length</i> 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
						<br>
						<i>percentage</i> 用百分比来控制。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
						<br>
						<i>cover</i> 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。(背景图像的某些部分也许无法显示在背景定位区域中。)
						<br>
						<i>contain</i> 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
						<br>
					</div>
				</li>
				<li>
					<div><strong>.border-image(@url, @width, @repeat)</strong></div>
					<div>
						使用图片作为边框
						<br>
						<i>@url</i>路径
						<br>
						<i>@width</i>宽度(粗细)
						<br>
						<i>@repeat</i>：<i>[ stretch | repeat | round ]</i>拉伸 | 重复 | 平铺 (其中stretch是默认值。)


					</div>
				</li>
				<li>
					<div><strong>.font-face(@path, @font-name)</strong></div>
					<div>
						使用图片作为边框
						<br>
						<i>@path</i>路径
						<br>
						<i>@font-name</i>字体名称
						<br> 例如：文件放到了 ../style/font/busy.eot(等), 那么 <i>@path</i>传入 ../style/font <i>@font-name</i>传入 busy 即可
					</div>
				</li>
				<li>
					<div class="more">更多css3请查看<i>css3.less</i>源码<span>|</span>更多CSS3教程请查看 <a href="http://www.w3cplus.com/blog/tags/11.html" target="_blank">CSS3教程</a><span>|</span>如需帮助，请
						<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1060755575&site=qq&menu=yes"><img border="0" src="" alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>